<!-- 绑定手机号 -->
<template>
	<view class="container">
		<view class="cut"></view>
		<view class="name">
			<text :animation="animationData1">{{phone1}}</text>
			<input type="number" v-model="info.phone" :placeholder="phone2" />
		</view>
		<view class="idcard">
			<text :animation="animationData2">验证码</text>
			<input type="number" v-model="info.code" placeholder="验证码" @confirm="newok" />
			<text class="veri" :class="!isCheck ? 'yzmactive' : ''" @tap="isCheck && yzm()">获取验证码</text>
			<text class="ver" v-show="!isCheck">{{ time }}秒后可再次获取</text>
		</view>
		<view :class="active?'active':''" class="btn" @tap="active&&newok()">
			{{submit}}
		</view>
	</view>
</template>

<script>
	import {
		registerVerify,
		bindingPhone
	} from "@/api/user.js";

	import {
		channelBindSeller
	} from "@/api/merchant.js"
	export default {
		data() {
			return {
				phone1: "手机号码",
				phone2: "请输入手机号码",
				submit: "提交",
				backurl: false,
				info: {
					phone: "",
					code: ""
				},
				time: 60,
				isClick: true,
				active: false,
				isCheck: true,
				animationData1: {},
				animationData2: {},
				step: 0,
				userType: ""
			};
		},
		onLoad(options) {
			if (options.backurl) {
				this.backurl = true
			}
			if (options.userType) {
				this.userType = options.userType
			}
			if (options.type == 1) {
				this.step = 1
				uni.setNavigationBarTitle({
					title: "修改手机号码"
				})
				this.phone1 = "原手机号码"
				this.phone2 = "请输入原手机号码"
				this.submit = "下一步"
			}
			if (options.type == 2) {
				this.step = 0
				uni.setNavigationBarTitle({
					title: "修改手机号码"
				})
				this.phone1 = "新手机号码"
				this.phone2 = "请输入新手机号码"
				this.submit = "提交"
			}
			var animation = uni.createAnimation({
				duration: 200,
				timingFunction: 'ease',
			})
			this.animation = animation
		},
		methods: {
			blur() {
				if (this.info.phone && this.info.code) {
					this.active = true
				} else {
					this.active = false
				}
				if (this.info.phone) {
					this.animation.opacity(1).step()
					this.animationData1 = this.animation.export()
				} else {
					this.animation.opacity(0).step()
					this.animationData1 = this.animation.export()
				}
				if (this.info.code) {
					this.animation.opacity(1).step()
					this.animationData2 = this.animation.export()
				} else {
					this.animation.opacity(0).step()
					this.animationData2 = this.animation.export()
				}
			},
			newok() {
				if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(this.info.phone)) {
					uni.showToast({
						icon: "none",
						title: "请输入正确的手机号码"
					});
					return false;
				}

				if (this.info.code == "") {
					uni.showToast({
						icon: "none",
						title: "验证码为空"
					});
					return false;
				}
				let _self = this;
				let data = {
					phone: _self.info.phone,
					captcha: _self.info.code,
					step: _self.step,
					user_type: _self.userType
				};
				uni.showLoading({
					mask: true
				})
				bindingPhone(data).then(res => {
					uni.hideLoading()
					uni.showModal({
						content: res.msg,
						showCancel: false,
						success: function(re) {
							if (re.confirm) {
								let info = uni.getStorageSync('userInfo')
								info.phone = _self.info.phone
								uni.setStorageSync('userInfo', info)
								if (_self.backurl && !_self.userType) {
									uni.navigateBack({

									})
								} else if (_self.backurl && _self.userType) {
									if (res.data) {
										uni.setStorageSync('Authori-zation', res.data.token)
										uni.setStorageSync('expires_time', res.data.expires_time);
										uni.setStorageSync("userInfo", res.data.userInfo)
										if (uni.getStorageSync("sid") && !res.data.userInfo.is_checked) {
											//身份证未绑定
											uni.redirectTo({
												url: "/pages/center/accountSet/certification/certification?codeback=true"
											})
										} else if (uni.getStorageSync("sid") && res.data.userInfo.is_checked) {
											channelBindSeller({
												seller_id: uni.getStorageSync("sid")
											}).then(r => {
												if (r.data) {
													uni.removeStorageSync("sid")
													uni.showModal({
														content: r.msg,
														showCancel: false,
														success(re) {
															if (re.confirm) {
																uni.reLaunch({
																	url: "/pages/index/index"
																})
															}
														}
													})
												} else {
													uni.removeStorageSync("sid")
													//#ifdef H5
													if (uni.getStorageSync("QRCodeRout")) {
														uni.reLaunch({
															url: uni.getStorageSync("QRCodeRout").split("?")[0]
														})
														uni.removeStorageSync("QRCodeRout")
													} else {
														uni.reLaunch({
															url: "/pages/index/index"
														})
													}
													//#endif
													//#ifndef H5
													uni.navigateBack({})
													//#endif
												}
											})
										} else {
											//#ifdef H5
											if (uni.getStorageSync("QRCodeRout")) {
												uni.reLaunch({
													url: uni.getStorageSync("QRCodeRout")
												})
												uni.removeStorageSync("QRCodeRout")
											} else {
												uni.reLaunch({
													url: "/pages/index/index"
												})
											}
											//#endif
											//#ifndef H5
											uni.navigateBack({})
											//#endif
										}
									} else {
										if (uni.getStorageSync("sid") && !info.is_checked) {
											//身份证未绑定
											uni.redirectTo({
												url: "/pages/center/accountSet/certification/certification?codeback=true"
											})
										} else if (uni.getStorageSync("sid") && info.is_checked) {
											channelBindSeller({
												seller_id: uni.getStorageSync("sid")
											}).then(r => {
												if (r.data) {
													uni.removeStorageSync("sid")
													uni.showModal({
														content: r.msg,
														showCancel: false,
														success(er) {
															if (er.confirm) {
																uni.reLaunch({
																	url: "/pages/index/index"
																})
															}
														}
													})
												} else {
													uni.removeStorageSync("sid")
													//#ifdef H5
													if (uni.getStorageSync("QRCodeRout")) {
														uni.reLaunch({
															url: uni.getStorageSync("QRCodeRout")
														})
														uni.removeStorageSync("QRCodeRout")
													} else {
														uni.reLaunch({
															url: "/pages/index/index"
														})
													}
													//#endif
													//#ifndef H5
													uni.navigateBack({})
													//#endif
												}
											})
										} else {
											//#ifdef H5
											if (uni.getStorageSync("QRCodeRout")) {
												uni.reLaunch({
													url: uni.getStorageSync("QRCodeRout")
												})
												uni.removeStorageSync("QRCodeRout")
											} else {
												uni.reLaunch({
													url: "/pages/index/index"
												})
											}
											//#endif
											//#ifndef H5
											uni.navigateBack({})
											//#endif
										}
									}
								} else if (_self.step == 1) {
									uni.redirectTo({
										url: "/pages/center/accountSet/phone/addPhone?type=2"
									});
								} else {
									uni.redirectTo({
										url: "/pages/center/accountSet/phone/phone"
									});
								}
							} else if (re.cancel) {}
						}
					})
				});
			},
			yzm() {
				let _self = this;
				if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(_self.info.phone)) {
					uni.showToast({
						icon: "none",
						title: "请输入正确的手机号码"
					});
					return false;
				}
				uni.showLoading({
					mask: true
				})
				registerVerify({
					phone: _self.info.phone
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: res.msg
					});
					_self.isCheck = false;
					_self.countdown();
				})
			},
			countdown() {
				let _self = this;
				if (_self.time == 0) {
					_self.isCheck = true;
					_self.time = 60;
				} else {
					_self.time--;
					setTimeout(_self.countdown, 1000);
				}
			}
		},
		watch: {
			info: {
				deep: true,
				handler(val, oldval) {
					let _self = this;
					_self.blur();
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 60rpx;

		.cut {
			width: 750rpx;
			margin-left: -60rpx;
			height: 20rpx;
			background: rgba(238, 238, 238, 1);
		}

		.name {
			height: 40upx;
			margin-top: 90upx;
			position: relative;

			text {
				position: absolute;
				opacity: 0;
				top: -30upx;
				font-size: 24upx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}

			input {
				border-bottom: 1upx solid rgba(220, 220, 220, 1);
				padding: 10upx 0;
			}
		}

		.idcard {
			margin-top: 90upx;
			position: relative;

			text:nth-of-type(1) {
				position: absolute;
				opacity: 0;
				top: -30upx;
				font-size: 24upx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}

			input {
				border-bottom: 1upx solid rgba(220, 220, 220, 1);
				padding: 10upx 0;
				height: 50rpx;
				line-height: 50rpx;
			}

			.veri {
				position: absolute;
				right: 0upx;
				top: 0upx;
				height: 100%;
				line-height: 70rpx;
				font-size: 24upx;
				font-weight: bold;
				color: $theme-color;
				z-index: 9;
			}

			.yzmactive {
				color: #999 !important;
			}

			.ver {
				text-align: right;
				font-size: 24upx;
				color: #999999;
				position: absolute;
				right: 0;
				top: -30upx;
			}
		}

		.btn {
			margin: 200rpx auto 0;
			width: 630rpx;
			height: 80upx;
			color: #fff;
			background: rgba(220, 220, 220, 1);
			border-radius: 40upx;
			text-align: center;
			line-height: 80upx;
			color: #ffffff;
		}

		.active {
			background: $theme-color;
		}
	}
</style>
